<template>
	<scroll-view scroll-y class="scroll-main" @scrolltolower="scrollBottomFn">
	  <!-- 列表 -->
	  <view class="list">
	    <view v-for="item in list"
	      :key="item.wxUserId"
	      class="list-item">
	      <view class="top-box">
	        <view class="left-item">
	          <view class="image">
	            <!-- <image src="@/static/images/Ehome/defultAvatar-1.png" mode="" /> -->
	            <image :src="item.avatar"></image>
	          </view>
	          <view class="desc-box">
	            <view class="t-desc">
	              <view class="name">{{ item.name }}</view>
	              <view class="icon">
	                <image
	                  :src="
	                    item.sex == '女'
	                      ? 'http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/09/5285d5d3bab744009c3ab3a9a243f8de.png'
	                      : 'http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/09/6645a9716ba349119fe1fbd3e4b8ada5.png'
	                  " />
	              </view>
	              <view
	                class="status"
	                :class="{ active: item.verifyStatus === '1' }">
	                {{ item.verifyStatus === "1" ? "已实名" : "未实名" }}
	              </view>
	            </view>
	            <view class="b-desc">
	              <view class="text"
	                >{{ item.age }}岁
	                <text style="padding: 0 4rpx"> |</text></view
	              >
	              <view class="text"
	                >{{ item.education }}
	                <text style="padding: 0 4rpx"> |</text>
	              </view>
	              <view class="text">{{ item.workExperience }}年经验</view>
	            </view>
	          </view>
	        </view>
	  
	        <view class="right-item ellipsis1">
	          <view class="label">
	            <text class="" selectable="false" space="false" decode="false">
	              {{ item.jobType }}
	            </text>
	          </view>
	          <view style="height: 42rpx; margin-bottom: 15rpx"> </view>
	          <view class="address">{{ item.city }}</view>
	        </view>
	      </view>
	      <view class="line"></view>
	  
	      <view class="bottom-box">
	        <view class="b-left">
	          <text class="one">意向</text>
	          <text class="tow">{{ item.postName }}</text>
	        </view>
	        <view class="b-right">
	          <text class="symbol">¥</text>
	          <text class="money">{{ item.salary }}</text>
	        </view>
	      </view>
		  
		  <view class="bottom-btn">
			  <view v-if="item.collect" class="btn1" @click="collectChange(item)">取消收藏</view>
			  <view v-else class="btn1" >已取消</view>
			  <navigator :url="'/subPage/enterprise/home/listDetails/index?id=' + item.wxUserId" class="btn1">查看详情</navigator>
		  </view>
	    </view>
	  </view>
	    
	  <uni-load-more :status="loading" />
	</scroll-view>
</template>

<script>
import { getCollectList } from "@/api/subPage/mine.js";
import { collectTalents } from "@/api/subPage/talents.js";
export default {
  name: "talentsCollect",
  data() {
    return {
		list: [],
		pages: 1, //当前分页总页数
		loading: "more", //加载状态
		form: {
		  pageSize: 10, //pageSize 每页大小
		  pageNum: 1, // pageNum 页数
		},
	};
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) {
	this.getListFn()
  },
  onShow() {
  
  },
  onReady() {
  
  },
  methods: {
	  // 获取列表
	  getListFn(current) {
	    let pages = this.pages;
	    if (current && current > pages) {
	      return true;
	    }
	    let pageNum = current ? current : 1;
	    this.loading = pageNum <= pages ? "loading" : "noMore";
	    getCollectList(this.form).then((res) => {
		  let records = res.rows ? res.rows : [];
		  records = records.map(v =>{
			  v.collect = true
			  return v
		  })
		  let newList = pageNum === 1 ? records : [...this.list, ...records];
		  this.form.pageNum = pageNum;
		  let newPages = Math.floor(res.total / this.form.pageSize);
		  this.pages = newPages;
		  this.loading = pageNum < newPages ? "more" : "noMore";
		  this.list = newList;
	      // console.log(this.list);
	    }).catch(e =>{
			this.loading = "noMore"
		});
	  },
	  // 改变收藏状态
	  collectChange(item) {
	    // 状态（true=确认收藏 false=取消收藏）
	    collectTalents({
	      wxUserId: item.wxUserId,
	      state: false,
	    }).then((res) => {
	      if (res.code == 200) {
	        item.collect = false;
			uni.showToast({
				title: '已取消',
				duration: 2000
			});
	      }else{
	  		uni.showToast({
	  			title: '取消失败',
	  			icon: 'none',
	  			duration: 2000
	  		});
	  	}
	    });
	  },
	  // 监听滑动到底部
	  scrollBottomFn() {
	    let pageNum = this.form.pageNum;
	    if (pageNum < this.pages) {
	      this.getListFn(pageNum + 1);
	    }
	  },
	  
    // toPath() {
    //   uni.navigateTo({
    //     url: "/subPage/enterprise/home/listDetails/index",
    //   });
    // },
  },
};
</script>

<style lang="scss">
.scroll-main {
  height: 100vh;
  box-sizing: border-box;
  padding: 0 0 30rpx;
}
.bottom-btn{
	display: flex;
	justify-content: flex-end;
  margin-top: 20rpx;
  margin-right: 24rpx;
  padding-bottom: 20rpx;

	.btn1{
		width: 160rpx;
		height: 64rpx;
		font-size: 24rpx;
		color: #000000;
		line-height: 64rpx;
		text-align: center;
		border: 1rpx solid #0000001f;
		border-radius: 44rpx;
		margin-left: 12rpx;
	}
}
.list {
  margin-top: 30rpx;
  background-color: #f9f9f9;
  // height: 100vh;

  // .scroll {
  //   height: 100%;

  .list-item {
    // height: 248rpx;
    background-color: #fff;
    border-radius: 16rpx;

    margin: 24rpx 24rpx 31rpx;

    .top-box {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 50%;
      margin-top: 32rpx;

      .left-item {
        padding-top: 24rpx;
        padding-left: 24rpx;
        display: flex;
        height: 100%;

        .image {
          width: 96rpx;
          height: 96rpx;
          margin-right: 16rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .desc-box {
          display: flex;
          flex-direction: column;

          .t-desc {
            display: flex;
            margin-top: 16rpx;

            .name {
              height: 40rpx;
              line-height: 40rpx;
              font-weight: 500;
              font-size: 28rpx;
              color: #000000e0;
              margin-right: 12rpx;
              margin-bottom: 12rpx;
            }

            .icon {
              margin-right: 12rpx;

              image {
                width: 24rpx;
                height: 24rpx;
              }
            }

            .status {
              width: 82rpx;
              height: 32rpx;
              text-align: center;
              line-height: 32rpx;
              background: #f3f3f3;
              border-radius: 8rpx;
              font-weight: 500;
              font-size: 18rpx;
              color: rgba(0, 0, 0, 0.64);
              &.active {
                color: #9b7748;
                background: #ffebd1;
              }
            }
          }

          .b-desc {
            display: flex;

            .text {
              color: #00000073;
              opacity: 0.45;
              font-size: 24rpx;

              font-weight: 500;

              text-align: left;
            }
          }
        }
      }

      .right-item {
        padding-top: 32rpx;

        .label {
          position: absolute;
          right: 45rpx;
          width: 120rpx;
          height: 42rpx;
          background: #34a1ff;
          border-radius: 6rpx;
          font-weight: 500;
          font-size: 22rpx;
          color: #ffffff;
          text-align: center;
          line-height: 42rpx;
          margin-bottom: 10rpx;
        }

        .address {
          font-weight: 500;
          font-size: 24rpx;
          color: #00000073;
          margin-right: 24rpx;
        }
      }
    }

    .line {
      margin: 24rpx 24rpx 26rpx;
      height: 2rpx;
      background-color: #eeeeef;
    }

    .bottom-box {
      display: flex;
      justify-content: space-between;
      padding-left: 24rpx;
      padding-right: 24rpx;

      .b-left {
        .one {
          font-weight: 500;
          font-size: 22rpx;
          color: #00000073;
          opacity: 45%;
        }

        .tow {
          padding-left: 12rpx;
          height: 45rpx;
          line-height: 45rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #000000;
          opacity: 0.64;
        }
      }

      .b-right {
        .symbol {
          color: #000000;
          margin-right: 6rpx;
        }
        .money {
          color: #ff9e24;
          font-size: 34rpx;
          font-weight: 500;
          text-align: left;
        }
      }
    }
  }
  // }
}
</style>
